<script setup lang="ts">
definePage({
  name: 'home',
  layout: 'tabbar',
  style: {
    navigationBarTitleText: '首页',
    navigationStyle: 'custom',
  },
})
const test = ref ()

// onLoad(async () => {

// })
</script>

<template>
  <view class="page-container">
    <view class="header">
      <text class="title">
        Uni Starter
      </text>
      <text class="description">
        ⚡️ 由 vite & uni-app 驱动的、深度整合 Wot UI 组件库的快速启动模板
      </text>
      <text class="subtitle">
        背靠 Uni Helper、Wot UI ，告别 HBuilderX ，拥抱现代前端开发工具链
      </text>

      <dict-picker v-model="test" dict-key="SYS_FILE_TYPE" class="env-name" />
    </view>
  </view>
</template>

<style lang="scss" scoped>
.page-container {
  box-sizing: border-box;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.header {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
  box-sizing: border-box;
  border-radius: 0.75rem;
  background-color: #ffffff;
  padding: 1.5rem 1rem;
  text-align: center;

  .dark & {
    background-color: var(--wot-dark-background2);
  }

  .title {
    margin-bottom: 0.75rem;
    display: block;
    text-align: left;
    font-size: 1.25rem;
    color: #1f2937;
    font-weight: 700;

    .dark & {
      color: #e5e7eb;
    }
  }

  .description {
    margin-bottom: 0.75rem;
    display: block;
    text-align: left;
    font-size: 30rpx;
    color: #4b5563;
    line-height: 1.625;

    .dark & {
      color: #d1d5db;
    }
  }

  .subtitle {
    display: block;
    text-align: left;
    font-size: 0.75rem;
    color: #9ca3af;
    line-height: 1.625;

    .dark & {
      color: #9ca3af;
    }
  }
}
</style>
